<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/layout :: common_header(~{::title},~{::link})">
<title>角色管理</title>
 <!-- 
  additional css  -->

</head>
 
<body>
	<div class="main-container">
		<div class="main-content-inner">
			<div class="page-content">
				<div class="row">
					<div class="col-xs-12">
						<form action="" class="form-inline" id="userForm">
							 <label>角色名称：</label><input
								type="text" name="name">
							<button class="btn btn-primary btn-rounded btn-outline btn-sm "
							 type="button"	onclick="search()">
								<i class="fa fa-search"></i> 查询
							</button>
							<button class="btn btn-primary btn-rounded btn-outline btn-sm "
								type="reset">
								<i class="fa fa-refresh"></i> 重置
							</button>
						</form>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<div class="pull-left">
							<button class="btn btn-primary btn-sm" data-toggle="tooltip"
								data-placement="left" onclick="add()" title="添加">
								<i class="fa fa-plus"></i> 添加
							</button>
							<button class="btn btn-success btn-sm" data-toggle="tooltip"
								data-placement="left" onclick="edit()" id="edit" title="修改">
								<i class="glyphicon glyphicon-edit"></i> 修改
							</button>
							<button class="btn btn-danger btn-sm" onclick="del()" id="delete"
								data-toggle="tooltip" data-placement="top">
								<i class="fa fa-trash-o"> 删除</i>
							</button>
							 

						</div>
						<div class="pull-right"></div>
					</div>
				</div>
				 
				<div class="row">
					<div class="col-xs-12">
						<table id="roletable"  data-toggle="table" data-side-pagination="server" 
						data-striped="true"  data-query-params="queryParams" data-pagination-loop="false"
               			data-page-number="1" data-data-field="list" data-total-field="totalRow"
               			data-content-type="application/x-www-form-urlencoded" data-click-to-select="true"
               			data-pagination="true" data-method="post"  th:data-url="@{/sys/role/query}"  >
               			<thead>
										<tr>
											<th class="center" data-checkbox="true"  > </th>
											<th   data-field="id"   > ID</th>
											<th class="center" data-field="name">角色名称</th>
											<th data-field="enname">角色编码</th>
											<th data-field="officeName">归属机构</th>
											<th class="hidden-480" data-field="useable" data-formatter="statusFormatter">状态</th>
											<th data-field="id" data-formatter="optFormatter">操作</th>
										</tr>
									</thead>
						</table>
					</div>
				</div>
				<!-- /.col -->
			</div>

		</div>
		<!-- end main container -->
	</div>

<div th:replace="common/commonJS"></div>
	 <script>

	 function queryParams(params){
		 var temp = $("#userForm").serializeJSON();
		 temp.pageSize=params.limit;   //页面大小
		 temp.pageNumber=(params.offset / params.limit) + 1;   //页码  
		 temp.sort=params.sort;      //排序列名  
		 temp.sortOrder=	 params.order; //排位命令（desc，asc）
		 return temp; 
	 }
    function statusFormatter(value,row,index){
    	if(value=="1"){
    		return "<span class='label label-sm label-success'>可用</span>"
    	}else{
    		return "<span class='label label-sm label-warning'>禁用</span>";
    	}
    }
    function optFormatter(value,row,index){
    	return "<div class='hidden-sm hidden-xs btn-group'>"+
    	"<button class='btn btn-xs btn-info' onclick='edit("+value+")'>修改</button>"
    	+"<button class='btn btn-xs btn-danger' onclick='auth("+value+")'>权限设置</button>"
    	+"<button class='btn btn-xs btn-danger'>分配用户</button>"
    	+"</div>"
    	
    }
    function search(){
    	$('#roletable').bootstrapTable('refresh');
    }
    function add(){
    	jp.openWindow("新增"+'角色',"sys/role/add","800px", "360px");
    }
    
    function getIdSelections() {
        return $.map($("#roletable").bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }

    function edit(id){
    		if(!id){
    			var selectRows=$('#roletable').bootstrapTable('getSelections');
    	    	if(selectRows.length==0){
    	    		jp.alert("未选择任何行");
    	    	}else if(selectRows.length>1){
    	    		jp.alert("只能修改一行");
    	    	}
  			  id = getIdSelections();
  		  }
    		jp.openWindow("修改"+'角色',ctx+"sys/role/edit/"+id,"800px", "360px");	
    	 
    	
    }
    function auth(id){
		jp.openDialog('菜单权限', ctx+'sys/role/auth?roleId=' + id,'350px', '700px');
	}
    function del(ids){
    	//layer.confirm("确定要删除吗"){}
    	var selectRows=$('#roletable').bootstrapTable('getSelections');
    	if(selectRows.length==0){
    		jp.alert("未选择任何行");
    	 
    	}else{
    		 if(!ids){
			    	ids =  getIdSelections();
			    }

    		jp.confirm('确定要删除选择的角色吗？', function (){
    			 jp.loading();
          	  	$.get(ctx+"sys/role/deleteAll?ids=" +ids, function(data){
          	  		if(data){
          	  			$('#roletable').bootstrapTable('refresh');
         	  			jp.success("删除成功");
         	  		}else{
         	  			jp.error("删除失败");
         	  		}
          	  	})

    		 }
 			
 		);
    	}
    }
    
	 $(function () {
    	$('#roletable').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
            $('#delete').prop('disabled', ! $('#roletable').bootstrapTable('getSelections').length);
            $('#edit').prop('disabled', $('#roletable').bootstrapTable('getSelections').length!=1);
        });
    });
</script>
</body>
</html>